/* === Calendar === */
@color-text: #3d4145; //文案色
@color-text-secondary: #5f646e; //次级文案
@color-text-gray: #999; //灰色文案
@color-text-gray-light: #ccc; //更灰色文案
@color-primary: #0894ec;

.flexbox() {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.hairline(@position, @color) when (@position = top) {
  border-top: 1px solid @color;
}
.hairline(@position, @color) when (@position = left) {
  border-left: 1px solid @color;
}
.hairline(@position, @color) when (@position = bottom) {
  border-bottom: 1px solid @color;
}
.hairline(@position, @color) when (@position = right) {
  border-right: 1px solid @color;
}
.justify-content(@jc) when (@jc = flex-start) {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
.justify-content(@jc) when (@jc = flex-end) {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}
.justify-content(@jc) when (@jc = space-between) {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.justify-content(@jc) when not (@jc = flex-start) and not (@jc = flex-end) and not (@jc = space-between) {
    -webkit-box-pack: @jc;
    -ms-flex-pack: @jc;
    -webkit-justify-content: @jc;
    justify-content: @jc;
}
.align-items(@ai) when (@ai = flex-start) {
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.align-items(@ai) when (@ai = flex-end) {
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}
.align-items(@ai) when not (@ai = flex-start) and not (@ai = flex-end) {
    -webkit-box-align: @ai;
    -ms-flex-align: @ai;
    -webkit-align-items: @ai;
    align-items: @ai;
}
.flex-shrink(@fs) {
    -webkit-flex-shrink: @fs;
    -ms-flex: 0 @fs auto;
    flex-shrink: @fs;
}
// For right and bottom
.hairline-remove(@position) when not (@position = left) and not (@position = top) {
  border-left: 0;
  border-bottom: 0;
}
// For left and top
.hairline-remove(@position) when not (@position = right) and not (@position = bottom) {
  border-right: 0;
  border-top: 0;
}


.picker-calendar {
    background: #fff;
    height: 300px;
    width: 100%;
    overflow: hidden;
    @media (orientation: landscape) and (max-height: 415px) {
        &:not(.picker-modal-inline) {
            height: 220px;
        }
    }
    .picker-modal-inner {
        overflow: hidden;
    }
}

.picker-calendar-week-days {
    height: 18px;
    background: #f7f7f8;
    .flexbox();
    .hairline(bottom, #c4c4c4);
    font-size: 11px;
    box-sizing: border-box;
    position: relative;
    .picker-calendar-week-day {
        .flex-shrink(1);
        width: 100% / 7;
        width: ~"-webkit-calc(100% / 7)";
        width: ~"-moz-calc(100% / 7)";
        width: ~"calc(100% / 7)";
        line-height: 17px;
        text-align: center;
    }
    + .picker-calendar-months {
        height: ~"-webkit-calc(100% - 18px)";
        height: ~"-moz-calc(100% - 18px)";
        height: ~"calc(100% - 18px)";
    }
}

.picker-calendar-months {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    border:#c7c7c7 1px solid;
    border-top:none;
}

.picker-calendar-months-wrapper {
    position: relative;
    width: 100%;
    height: 360px;
    transition: 300ms;
}

.picker-calendar-month {
    .flexbox();
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.picker-calendar-row {
    height: 100% / 6;
    height: ~"-webkit-calc(100% / 6)";
    height: ~"-moz-calc(100% / 6)";
    height: ~"calc(100% / 6)";
    .flexbox();
    .flex-shrink(1);
    width: 100%;
    position: relative;
    .hairline(bottom, #ccc);
    &:last-child {
        .hairline-remove(bottom);
    }
}

.picker-calendar-day {
    .flex-shrink(1);
    .flexbox();
    .justify-content(center);
    .align-items(center);
    box-sizing: border-box;
    width: 100% / 7;
    width: ~"-webkit-calc(100% / 7)";
    width: ~"-moz-calc(100% / 7)";
    width: ~"calc(100% / 7)";
    text-align: center;
    color: @color-text;
    font-size: 15px;
    cursor: pointer;
    &.picker-calendar-day-weekend {}
    &.picker-calendar-day-prev,
    &.picker-calendar-day-next {
        color: @color-text-gray-light;
    }
    .picker-calendar-month-prev &,
    .picker-calendar-month-next & {}
    &.picker-calendar-day-disabled {
        color: #d4d4d4;
        cursor: auto;
    }
    &.picker-calendar-day-today span {
        background: #e3e3e3;
    }
    &.picker-calendar-day-selected span {
        background: @color-primary;
        color: #fff;
    }
    span {
        display: inline-block;
        border-radius: 100%;
        width: 30px;
        height: 30px;
        line-height: 30px;
    }
}

.picker-calendar-month-picker,
.picker-calendar-year-picker {
    .flexbox();
    .align-items(center);
    .justify-content(space-between);
    width: 50%;
    max-width: 200px;
    .flex-shrink(10);
    a.icon-only {
        min-width: 36px;
    }
    span {
        .flex-shrink(1);
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

//
// 年份和月份选择器
// ===================================================================================
.picker-calendar-years-picker,
.picker-calendar-months-picker {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 15;
    transition-property: transform;
    transition-duration: .3s;
    transform: translate3d(0, 100%, 0);
    .hairline(top, @color-text-gray);
}

// 年份选择器
.picker-calendar-years-picker {
    .picker-calendar-years-picker-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        transition-property: transform;
        transition-duration: .3s;
    }
    .picker-calendar-years-group {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .picker-calendar-row {
        height: 100% / 5;
        height: ~"-webkit-calc(100% / 5)";
        height: ~"-moz-calc(100% / 5)";
        height: ~"calc(100% / 5)";
    }
    .picker-calendar-year-unit {
        .flexbox();
        .align-items(center);
        flex: 1;
        text-align: center;
        span {
            display: block;
            width: 100%;
        }
        &.current-calendar-year-unit {
            background: #e3e3e3;
        }
        &.picker-calendar-year-unit-selected {
            color: #fff;
            background: @color-primary;
        }
    }
}

// 月份选择器
.picker-calendar-months-picker {
    .picker-calendar-months-picker-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        transition-property: transform;
        transition-duration: .3s;
    }
    .picker-calendar-months-group {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .picker-calendar-row {
        height: 100% / 3;
        height: ~"-webkit-calc(100% / 3)";
        height: ~"-moz-calc(100% / 3)";
        height: ~"calc(100% / 3)";
    }
    .picker-calendar-month-unit {
        .flexbox();
        .align-items(center);
        flex: 1;
        text-align: center;
        span {
            display: block;
            width: 100%;
        }
        &.current-calendar-month-unit {
            background: #e3e3e3;
        }
        &.picker-calendar-month-unit-selected {
            color: #fff;
            background: @color-primary;
        }
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .picker-calendar-years-picker:before,
    .picker-calendar-months-picker:before {
        transform: scaleY(0.5);
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .picker-calendar-years-picker:before,
    .picker-calendar-months-picker:before {
        transform: scaleY(0.33);
    }
}

//修复toolbar
.picker-modal .toolbar-inner {
    height: 30px;
    .flexbox();
    text-align: center;
}

//修复Android 4.1 上 toolbar元素宽度错误
//因为它不能对 inline 的元素设置宽度
.picker-calendar-month-picker,
.picker-calendar-year-picker {
    display: block;
    line-height: 30px;
    a.icon-only {
        float: left;
        width: 25%;
        height: 30px;
        line-height: 30px; //不知道为什么 2.2rem 无法上下对齐；
    }
    .current-month-value,
    .current-year-value {
        float: left;
        width: 50%;
        height: 30px;
    }
}

//宅配日历表样式添加

.picker-modal.xm-calendar{
    height:480px;background: #fff;
    overflow: hidden;
    position: relative;
    .toolbar{
        width: 400px;
        border: 0;
        margin: 0 auto 25px;
        .icon-prev,.icon-next{width:30px;height:25px;display:inline-block;background:url(../images/icon-prev-next.png) no-repeat;background-position: 0 0; display: inline-block; vertical-align: middle;}
        .icon-next{background-position: 0 -39px;}
    }
    .picker-calendar-week-days{
        background: #fff;border-color: #e1e1e1;/* color: @color2; */height:40px; border:#c7c7c7 1px solid;
        .picker-calendar-week-day{line-height:  40px;}
    }
    .picker-calendar-row{
        border-color: #f0f0f0;
        .picker-calendar-day{
            display: block;overflow: hidden;border-right:1px solid #f0f0f0;/* color:@color2; */
            &:last-child{border-right: 0;}
            span{margin-top: 5px;}
            &.picker-calendar-day-today{
                position: relative;
                &:after{position: absolute;top:0;left:0;content:""; width: 0;height: 0;border-top:15px solid #0894ec;border-right:15px solid transparent;}
                span{background: none;}
            }
            &.deliverStop{
               color: #de5237;              
               span{background: #de5237;color: #fff;}
               &.forbid{
                    color: #E98774;
                    span{background: #E98774;}
                }
               &.picker-calendar-day-disabled{
                    color: #b8b8b8;
                    span{background: #b8b8b8;}
               }
            }
            &.deliverNormal{
               color: #b8b8b8; 
               span{background: #b8b8b8;color: #fff;}
               &.picker-calendar-day-disabled{
                    color: #b8b8b8;
                    span{background: #b8b8b8;}
               }   
            }
            &.deliverStart{
                color: #3eb494;
                span{background: #3eb494;color: #fff;}
                &.forbid{
                    color: #7ECDB7;
                    span{background: #7ECDB7;}       
                }
                &.picker-calendar-day-disabled{
                    color: #b8b8b8;
                    span{background: #b8b8b8;}
               }      
            }
            i.deliverName{
                font-size: 12px;
                display: block;
                width: 100%;
                clear: both;
                font-style: normal;
                height: 30px;line-height: 30px;
            }
        }
    }
    .picker-calendar-years-picker .picker-calendar-year-unit.picker-calendar-year-unit-selected{background: #3eb494;}
    .picker-calendar-months-picker .picker-calendar-month-unit.picker-calendar-month-unit-selected{background: #3eb494;}
    
}

.xm-calendar .picker-calendar-row {
	.picker-calendar-day.deliverStart.ActiveSelected{ background:#d8fff4;}
	.picker-calendar-day.deliverStop.ActiveSelected{ background:#fbdcdc;}
	.picker-calendar-day.deliverNormal.ActiveSelected{ background:#f6f6f6;}
}

.xm-calendar .picker-calendar-row {
	.picker-calendar-day.deliverStart.See span{ background:#b8b8b8;}
	.picker-calendar-day.deliverStop.See span{ background:#b8b8b8;}
	.picker-calendar-day.deliverNormal.See span{ background:#b8b8b8;}
}

.xm-calendar .picker-calendar-row {
	.picker-calendar-day.deliverStart.See.ActiveSelected{ background:#f6f6f6;}
	.picker-calendar-day.deliverStop.See.ActiveSelected{ background:#f6f6f6;}
	.picker-calendar-day.deliverNormal.See.ActiveSelected{ background:#f6f6f6;}
}
.xm-calendar .picker-calendar-row {
	.picker-calendar-day.deliverStart.See{ color:#b8b8b8;}
	.picker-calendar-day.deliverStop.See{ color:#b8b8b8;}
	.picker-calendar-day.deliverNormal.See{ color:#b8b8b8;}
}

.xm-calendar .picker-calendar-row {
	.picker-calendar-day.deliverStart.See.ActiveSelected{ background:#f6f6f6;}
	.picker-calendar-day.deliverStop.See.ActiveSelected{ background:#f6f6f6;}
	.picker-calendar-day.deliverNormal.See.ActiveSelected{ background:#f6f6f6;}
}

.picker-modal.xm-calendar .picker-calendar-row .picker-calendar-day.no_standard{
	position:relative;
}
.picker-modal.xm-calendar .picker-calendar-row .picker-calendar-day.no_standard.deliverStart:before{
	  content: '';
	  width: 6px;
  	  height: 6px;
	  border-radius: 50%;
	  background: #3eb494;
	  display: block;
	  margin: 0 auto;
	  position: absolute;
	  left: 48%;
}
.picker-modal.xm-calendar .picker-calendar-row .picker-calendar-day.no_standard.deliverStart span{
	background:none;
	color:#3eb494;
}
.picker-modal.xm-calendar .picker-calendar-row .picker-calendar-day.no_standard.deliverStop span{
	 background:none;
	 color:#333;
}

.picker-modal.xm-calendar .picker-calendar-row .picker-calendar-day.no_standard.deliverStop.picker-calendar-day-disabled span{color:#b8b8b8;}
.picker-modal.xm-calendar .picker-calendar-row .picker-calendar-day.no_standard.deliverStop:before{
	  content: '';
	  width: 6px;
  	  height: 6px;
	  border-radius: 50%;
	  background: #DE5237;
	  display: block;
	  margin: 0 auto;
	  position: absolute;
	  left: 48%;
}

.picker-modal.xm-calendar .picker-calendar-row .picker-calendar-day.no_standard.deliverStop span{
	background:none;
	color:#DE5237;
}

.picker-modal.xm-calendar .picker-calendar-row .picker-calendar-day.no_standard.deliverStart.picker-calendar-day-disabled:before {
  background: #B8B8B8;
}
.picker-modal.xm-calendar .picker-calendar-row .picker-calendar-day.no_standard.deliverStart.picker-calendar-day-disabled span{color:#B8B8B8;}
